<!--  -->
<template>
  <el-container>
    <el-header>Header</el-header>
    <el-main>



      <div class="login-container">

        <div class="img">
          <img src="../../assets/images/login.jpg" alt=""></img>
        </div>
        <div class="login-form">

        <div  @click="checkout" class="checkimg">
          <img v-if="loginType=='formLogin'" src="../../assets/images/qr.png" alt=""></img>
          <img v-else src="../../assets/images/form.png" alt=""></img>
        </div>
 

 <component :is="loginForm[loginType]"></component>
         




        </div>

      </div>

    </el-main>
    <el-footer>Footer</el-footer>
  </el-container>
</template>
<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import FormLogin from '../../components/login/FormLogin.vue';
import QrcodeLogin from '../../components/login/QrcodeLogin.vue';
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';

const loginType=ref("formLogin");
const loginForm:Record<string, any>={
  formLogin:FormLogin,
  qrcodeLogin:QrcodeLogin
 
}


const checkout=()=>{
  loginType.value=loginType.value=="formLogin"?"qrcodeLogin":"formLogin";
}
 

onBeforeRouteLeave((to, from, next) => {

  console.log("组件内守卫onBeforeRouteLeave");
  
  // 离开守卫逻辑
  next()
})

onBeforeRouteUpdate((to, from) => {
  // 更新守卫逻辑（无需next）
})



 

</script>
<style scoped lang="less">
.el-container {
  width: 100%;
  background-color: skyblue;

  min-width: 1190px;

  .el-header {
    height: 100px;
    background-color: red;
  }

  .el-main {
    background-color: yellow;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 200px);

    .login-container {
      width: 1190px;
      height: 480px;
      background-color: blue;
      margin: 30px auto;
      display: flex;
      overflow: hidden;

      .img {
        width: 790px;
        height: 100%;

        img {
          width: 100%;
          height: 100%;
        }

      }

      .login-form {
        flex: 1;
        height: 100%;
        background: #fff;
        padding: 30px 30px;
        box-sizing: border-box;
        position: relative;
        .checkimg{
          position: absolute;
          right: 10px;
          top: 10px;
          width: 50px;
          height: 50px;
          img{
            width: 100%;
            height: 100%;
          }
        }
      
      }

    }

  }

  .el-footer {
    height: 100px;
    background-color: red;
  }
}

.icon-yonghuming {
  font-size: 20px;
}
</style>